<div id="api-doc" *ngIf="api">
    <div id="api-header">
        <h2 [class.deprecated]="api?.deprecated">
            <span class="api-type">REST</span>
            {{api?.name}}
        </h2>
        <div class="position-right" *ngIf="user">
            <a *ngIf="envs && !apiVersion" class="api-call-link" [routerLink]="['/doc', artifact.id, api.key, 'call']">接口调用</a>
            <a class="api-call-link" [routerLink]="['/doc', artifact.id, api.key, 'mock']">Mock配置</a>
        </div>
    </div>
    <div class="api-doc-item">
        <blockquote class="api-desc" *ngIf="api?.comment" [innerHTML]="api.comment|desc|safeHtml"></blockquote>
        <blockquote class="api-desc" *ngIf="api?.deprecated">@deprecated {{api.deprecated}}</blockquote>
    </div>

    <div class="api-doc-item">
        <h3 class="display-inline-block">接口：</h3>
        <ul>
            <li *ngFor="let path of api?.paths">
                {{path}}
            </li>
        </ul>
    </div>
    <div class="api-doc-item">
        <h3>方法：</h3>
        <ul class="display-inline-block">
            <li *ngFor="let method of api?.methods">
                {{method}}
            </li>
            <ng-container *ngIf="!api?.methods">
                <li>GET</li>
                <li>POST</li>
            </ng-container>
        </ul>
    </div>

    <div class="api-doc-item">
        <h3>实现：<span>(可快速定位到代码)</span></h3>
        <markdown [data]="api|dubboApi"></markdown>
    </div>

    <ng-container *ngIf="api?.requestParams && api?.requestParams.length > 0">
        <div class="api-doc-item" *ngIf="requestHeaderParameters.length > 0">
            <h3>请求头：</h3>
            <app-render-table-header-params [apiParams]="requestHeaderParameters"></app-render-table-header-params>
        </div>

        <div class="api-doc-item" *ngIf="requestParameters.length > 0">
            <h3>URL参数：</h3>
            <app-render-table-params [apiParams]="requestParameters"></app-render-table-params>
            <div class="api-doc-item" *ngFor="let paramEntity of paramEntities">
                <p class="sub-title">
                    参数 {{paramEntity.name}} 实体 {{paramEntity.entity.name}} 结构：
                </p>
                <app-render-table-entity [entity]="paramEntity.entity"></app-render-table-entity>
            </div>
        </div>

        <div class="api-doc-item" *ngIf="bodyEntity">
            <h3>Body参数：</h3>
            <app-render-table-entity [entity]="bodyEntity"></app-render-table-entity>
        </div>

        <ng-container *ngIf="requestBodys">
            <div class="api-doc-item" *ngFor="let requestBody of requestBodys">
                <p class="sub-title">JavaScript Ajax RequestBody Demo:</p>
                <markdown [data]="requestBody|entityJson"></markdown>
            </div>
        </ng-container>
    </ng-container>

    <div class="api-doc-item">
        <h3>响应：</h3>
        <blockquote class="api-desc" *ngIf="response?.comment">{{response?.comment}}</blockquote>
    </div>
    <div class="api-doc-item">
        <markdown *ngIf="response" [data]="response|entityJson"></markdown>
    </div>
</div>
